<template>
  <el-table :data="table" :show-summary="showSummary" :row-class-name="tableRowClassName" size="mini" stripe border fit highlight-current-row @sort-change="sortChange" >
    <template v-for="(item, index) in key_mapper">
      <el-table-column v-if="item.is_link" :key = "2*index" :prop="item.key" :label="item.name" :min-width="minWidth" :formatter="formatter" :fixed="item.key=='day'||(item.key=='rank')||(item.key=='_chn') ? 'left':null">
        <template slot-scope="scope">
          <el-tooltip :content = "111" effect="dark" placement="top">
            <span v-if="scope.row[item.key] === '其他'">其他</span><el-button v-else type="text" @click="linkRow(scope.row)">{{ scope.row[item.key] }}</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column v-else :key = "2*index +1" :prop = "item.key" :label="item.name" :min-width="minWidth" :formatter="formatter" :fixed="item.key=='day'||(item.key=='rank')||(item.key=='_chn') ? 'left':null" width="140px">
        <template slot-scope="scope" slot="header">
          <el-tooltip :content = "item.description" :disabled="!item.description" effect="dark" placement="top">
            <span>{{ item.name }}</span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span :class="scope.row[item.key] < 0?'negative':null">
            {{ scope.row[item.key] ? item.value_type === 'float' ? scope.row[item.key].toFixed(2) : item.value_type === 'long' ? parseInt(scope.row[item.key]) : scope.row[item.key]:0 }} {{ item.is_percentage?'%':null }}
          </span>
        </template>
      </el-table-column>
    </template>
    <slot/>
  </el-table>
</template>

<script>
import { fixed3 } from '@/utils'
export default {
  name: 'AnalyseOnlineTable',
  props: {
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    key_mapper: {
      type: Array,
      default: function() {
        return []
      }
    },
    size: {
      type: String,
      default: 'mini'
    },
    minWidth: {
      type: Number,
      default: 130
    },
    sortable: {
      type: [Boolean, Array],
      default: function() {
        return false
      }
    },
    showSummary: {
      type: [Boolean, Array],
      default: false,
      required: false
    }
  },
  data() {
    return {
      table: this.trans(this.tableData),
      rowIndex: null
    }
  },
  computed: {

  },
  watch: {
    tableData() {
      this.table = this.trans(this.tableData)
      // console.log(this.table)
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.day === '环比') {
        this.rowIndex = rowIndex
        return 'warning-row'
      }
      if (this.rowIndex - 1 === rowIndex) {
        return 'greell'
      }
      return ''
    },
    linkRow(row) {
      this.$emit('linkRowData', row)
    },
    trans(tableData) {
      console.log(this.tableData)
      return tableData.map(item => {
        const obj = item
        this.key_mapper.forEach(item1 => {
          if (`${obj[item1.key]}` && item1.enum && (JSON.stringify(item1.enum) !== '{}')) {
            // debugger
            obj[item1.key] = item1.enum[obj[item1.key]] ? item1.enum[obj[item1.key]].name : obj[item1.key]
          }
        })
        return obj
      })
    },
    sortableIn(key) {
      if (this.sortable === false) {
        return false
      }
      if (this.sortable.includes(key)) {
        return false
      } else {
        return 'custom'
      }
    },
    sortChange(value) {
      const order = {
        ascending: '',
        descending: '-'
      }
      this.$emit('sort-change', { sort_by: `${order[value.order]}${value.prop}` })
    },
    formatter(row, column, item) {
      return fixed3(item)
    }
  }
}
</script>
<style>
  .el-table .warning-row .negative{
    color: #f00;
  }
  .el-table .greell .cell{
    background:#00d6b0;
  }

</style>
